import React from 'react';
import { Select, Button, Checkbox, Col, Form, Row, Switch, notification, message } from 'antd';
import { BorderTopOutlined } from '@ant-design/icons';
import '../Setting/Setting.scss'
const { Option } = Select;

function Setting(props: any) {
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    };
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };
    const [messageApi, contextHolder] = message.useMessage();
    const info = () => {
      messageApi.info('保存成功');
    };
    return (
        <div className='setting'>
            <div className='setting-one'>
                <div className='setting-title-left'></div>
                <h4 className='setting-title'>薪酬设置</h4>
            </div>
            <div className='setting-two'>
                <Form
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item
                        name="select"
                        label="计薪周期"
                        rules={[{ required: true }]}
                    >
                        <Select placeholder="请选择计薪周期">
                            <Option value="从1日开始">从1日开始</Option>
                            <Option value="从2日开始">从2日开始</Option>
                            <Option value="从3日开始">从3日开始</Option>
                            <Option value="......">......</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="switch1" label="工资条发送通知" valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item name="checkbox-group" label="接收方式">
                        <Checkbox.Group>
                            <Row>
                                <Col span={12}>
                                    <Checkbox value="A" style={{ lineHeight: '32px' }}>
                                        App通知
                                    </Checkbox>
                                </Col>
                                <Col span={12}>
                                    <Checkbox value="B" style={{ lineHeight: '32px' }}>
                                        短信
                                    </Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name="switch2" label="同步社保公积金" valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item name="switch3" label="同步考勤" valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <div className='borderbottom'></div>
                    <Form.Item wrapperCol={{ span: 12, offset: 6 }} className='submit'>
                        {contextHolder}
                        <Button type="primary" onClick={info}>保存</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Setting;